<template>
    <div class="datas_tabs">
        <el-tabs v-model="activeName" type="border-card" key="datas_tabs" class="datas_el_tabs">
            <el-tab-pane label="单程" name="first" class="animate__animated animate__slideInRight">
                <OneWayVue />
            </el-tab-pane>
            <el-tab-pane label="往返" name="return" class="animate__animated animate__slideInRight">
                <ReturnVue />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import OneWayVue from '../query/OneWay.vue';
import ReturnVue from '../query/Return.vue';
import { useRouter, useRoute } from "vue-router";
const activeName = ref('first')
//路由
const router = useRouter();
let route = useRoute();
</script>

<style lang="less" scoped>

.datas_tabs{
    width: 100%;
    height: 100%;
    margin: auto;
}
:deep(.el-tabs){
    width: 100%;
    height: 100%;
}
:deep(.el-tabs--border-card){
    border-radius: 0px 20px 20px 0px;
    background: var(--el-bg-color-overlay);
}
:deep(.el-tabs__header){
    width: 100%;
    height: 38px;
    transform: translate(0%, 0%);
    border-radius: 20px 20px 0px 0px;
    background-color: var(--el-fill-color-light);
}
:deep(.el-tabs__nav-wrap) {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
}
:deep(.el-tabs__nav-scroll){
    width: 90%;
    height: 100%;
}
:deep(.el-tabs__item){
    padding: 0px 22px;
    font-size: 18px;
    // border-radius: 20px 0px 0px 0px;
    font-family: "微软雅黑";
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
    color: #000;
    background-color: var(--el-bg-color-overlay);
    border-right-color: var(--el-border-color);
    border-left-color: var(--el-border-color);
}
:deep(.el-tabs__content){
    transform: translate(1.5%, 0%);
    width: 92%;
    height: 300%;
    // box-shadow: var(--el-box-shadow-dark);
}
</style>

